<template>
	<view class="datail_view">
		<view class="jianbian_bg">
			<view class="pt1_box">
				<image :src="baseUrl+schoolData.logo" class="da1_img"></image>
				<view class="s_info">
					<view class="s_tit">
						{{schoolData.name}}
					</view>
					<view class="from_s">
						<view class="cv1 first">
							{{schoolData.nature_text}}
						</view>
						<view class="cv1 sc">
							{{schoolData.areaname}}
						</view>
					</view>
				</view>
			</view>
			<view class="lunbo_box_d">
				<swiper style="height: 388rpx"  :circular="true" :interval="4000" :duration="1000" @change="changeLunbo">
					<swiper-item v-for="item in lunboList">
						<view class="swiper-item">
							<image :src="baseUrl+item" class="img1"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="anniu">
					{{lunboIndex+1}}/{{lunboList.length}}
				</view>
			</view>
		</view>
		<view class="detail_all_box">
			
		
		<scroll-view class="scroll_h_view" scroll-x="true">
			<view class="nav_tc" v-for="(item,key) in navFList" :class="key == 0 ?'active':''">
				{{item.name}}
			</view>
		</scroll-view>
		<view class="x1_t">
			<view class="c_text">
				{{schoolData.intro}}
			</view>
			<view class="sy_hang" @click="toPhone(schoolData.mobile)">
				<view class="s_left" >
					<image src="../../static/detail/dphone.png" class="d_img"></image>
					<view class="t_tk">
						{{schoolData.mobile}}
					</view>
				</view>
				<view class="r_left">
					<image src="../../static/mine/mjt2.png" class="mjt1_img"></image>
				</view>
			</view>
			<view class="sy_hang" @click="toMap(schoolData.lng,schoolData.lat)">
				<view class="s_left">
					<image src="../../static/detail/dpoint.png" class="d_img"></image>
					<view class="t_tk">
						{{schoolData.address}}
					</view>
				</view>
				<view class="r_left">
					<image src="../../static/mine/mjt2.png" class="mjt1_img"></image>
				</view>
			</view>
		</view>
		<view class="x2_t">
			<view class="t_header_box">
				<view class="t_left">
					录取分数线
				</view>
				<image src="../../static/mine/mjt2.png" class="mjt1_img"></image>
			</view>
			<view class="t_table_sy">
				<view class="tr_d header_x2">
					<view class="c1">
						无
					</view>
					<view class="c2">
						最低分数
					</view>
				</view>
				<view v-if="schoolData.score">
					<view class="tr_d" v-for="item in schoolData.score">
						<view class="c1">
							{{item.text}}
						</view>
						<view class="c2">
							{{item.score}}
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="x3_t">
			<view class="t_header_box">
				<view class="t_left">
					招生资讯
				</view>
				<image src="../../static/mine/mjt2.png" class="mjt1_img"></image>
			</view>
			<view class="x3_box" v-if="schoolData.article && schoolData.article.article && schoolData.article.article.length > 0">
				<view class="item_b" v-for="item in schoolData.article.article">
					<view class="hang1">
						{{item.title}}
					</view>
					<view class="date1">
						{{$getDate(item.createtime,"年-月-日") }}
					</view>
				</view>
			</view>
			<view class="x3_box" v-if="schoolData.article && schoolData.article.article && schoolData.article.article.length == 0">
				暂无招生资讯
			</view>
		</view>
		<view class="x4_t">
			<view class="t_header_box">
				<view class="t_left">
					招生计划
				</view>
				<image src="../../static/mine/mjt2.png" class="mjt1_img"></image>
			</view>
			<view class="t_table_x4">
				<view class="tr_d hed_d">
					<view class="c1">
						专业名称
					</view>
					<view class="c2">
						招生人数
					</view>
					<view class="c3">
						学制
					</view>
				</view>
				<view class="tr_d hed_t" v-for="item in schoolData.major">
					<view class="c1">
						{{item.name}}
					</view>
					<view class="c2">
						{{item.plan_num}}
					</view>
					<view class="c3">
						3年
					</view>
				</view>
				<view class="tr_d hed_t">
					<view class="c1">
						美术专业班
					</view>
					<view class="c2">
						10
					</view>
					<view class="c3">
						3年
					</view>
				</view>
			</view>
		</view>
		<view class="x5_t">
			<view class="t_header_box">
				<view class="t_left">
					开设专业
				</view>
				<image src="../../static/mine/mjt2.png" class="mjt1_img"></image>
			</view>
			<view class="t_table_x5">
				<view class="tr_d hed_d">
					<view class="c1">
						专业名称
					</view>
					<view class="c2">
						学制
					</view>
					<view class="c3">
						学历
					</view>
				</view>
			</view>
			
			<view class="box_item" v-for="item in kaishiList">
				<view class="t_table_x5">
					
					<view class="tr_d hed_t">
						<view class="c1">
							数信英才班
						</view>
						<view class="c2">
							三年
						</view>
						<view class="c3">
							高中
						</view>
					</view>
				</view>
				<view class="more_text">
					数信英才班依托清华附中的优质教育资源，在全面培养 学生的社会责任感、全球视野、科学精神、创新思维、实践能力、合作精神等的前提下，培养学生具有较强的数学基础和良好的数学思维能力，成为具备信息学与计算科学素养及实践能力的拔尖创新人才。
				</view>
			</view>
			
		</view>
		<view class="x6_t">
			<view class="t_header_box">
				<view class="t_left">
					热门问答
				</view>
				<image src="../../static/mine/mjt2.png" class="mjt1_img"></image>
			</view>
			<view class="wenda_box">
				<view class="item_p" v-for="item in kaishiList">
					<view class="tit">
						清华附中湾区学校怎么样？
					</view>
					<view class="c_comtent">
						清华附中湾区学校位于广州市番禺区，是经广州市教育 局批准、由广东国艺文化投资有限公司投资兴建的一...
					</view>
					<view class="liang">
						15人阅读
					</view>
				</view>
			</view>
		</view>
		</view>
		<uni-popup ref="banjiPopup" type="center">
			<sy-popup1 :title="'班级简介'" :content="popContent" @close="$refs.banjiPopup.close()"></sy-popup1>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popContent:"数信英才班依托清华附中的优质教育资源，在全面培养学生的社会责任感、全球视野、科学精神、创新思维、实践能力、合作精神等的前提下，培养学生具有较强的数学基础和良好的数学思维能力，成为具备信息学与计算科学素养及实践能力的拔尖创新人才。",
				lunboList:[{pic:"../../static/detail/dlb1.png"},{pic:"../../static/detail/dlb1.png"},{pic:"../../static/detail/dlb1.png"}],
				lunboIndex:0,
				navFList:[
					{name:"概览",tid:"x1"},
					{name:"分数线",tid:"x2"},
					{name:"招生资讯",tid:"x3"},
					{name:"招生计划",tid:"x4"},
					{name:"开设专业",tid:"x5"},
					{name:"热门问答",tid:"x6"}
				],
				kaishiList:['',''],
				schoolId:"",
				schoolData:{}
			};
		},
		computed:{
			baseUrl(){
				return this.$store.state.baseUrl
			}
		},
		onLoad(ph) {
			this.schoolId = ph.id;
			this.getSchoolData(ph.id)
		},
		methods:{

			
			toPhone(num){
				uni.makePhoneCall({
				    phoneNumber: num,
				    success: function () {
				        console.log('拨打电话成功！');
				    },
				    fail: function () {
				        console.log('拨打电话失败！');
				    }
				});
			},
			toMap(x,y){
				uni.navigateTo({
					url:"/pages/school/schoolMap?longitude="+x+"&latitude="+y
				})
			},
			getSchoolData(id){
				this.$queryApi("post","/school.school/detail?id="+id, {}, res => {
					console.log(res,"学校详情")
					this.schoolData = res.data.detail;
					this.lunboList = this.schoolData.images;
				},"","noMsg")
			},
			changeLunbo(el) {
				setTimeout(() => {
					this.lunboIndex = el.detail.current;
					console.log(this.lunboIndex,"this.lunboIndex")
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	
.datail_view{
	.jianbian_bg{
		background: linear-gradient( to bottom, #ffffff 0%, #f6f6f6 100%);
	}
	.pt1_box{
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx 40rpx;
		.da1_img{
			width: 144rpx;
			height: 144rpx;
			margin-right: 36rpx;
		}
		.s_info{
			.s_tit{
				font-size: 32rpx;
				padding-bottom: 10rpx;
			}
			.from_s{
				display: inline-flex;
				background-color: #e7ebf6;
				border-radius: 0 60rpx 60rpx 60rpx;
				.cv1{
					
					font-size: 24rpx;
					color: #3677F6;
					&.first{
						background-color: #3677F6;
						color: #fff;
						border-radius: 0 60rpx 60rpx 60rpx;
						padding: 6rpx 22rpx;
					}
					&.sc{
						padding: 6rpx 20rpx 6rpx 12rpx;
					}
				}
			}
		}
	}
	.detail_all_box{
		padding:0 30rpx 100rpx;
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
	}
	.scroll_h_view{
		
	}
	.t_header_box{
		display: flex;
		justify-content: space-between;
		padding: 40rpx 0 20rpx;
		.t_left{
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
		}
		.mjt1_img{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.t_table_sy{
		border: 2rpx solid #DFE5FF;
		border-radius: 20rpx;
		background: #F5F6FA;
		.tr_d{
			display: flex;
			font-size: 32rpx;
			
			.c1{
				width: 35%;
				text-align: center;
				padding: 16rpx 0 22rpx;
				border-right: 1rpx solid #DFE5FF;
				border-bottom: 1rpx solid #DFE5FF;
			}
			.c2{
				flex:1;
				text-align: center;
				padding: 16rpx 0 22rpx;
				border-bottom: 1rpx solid #DFE5FF;
			}
			&:last-child{
				.c1{
					border-bottom: none;
				}
				.c2{
					border-bottom: none;
				}
			}
		}
	}
	.x6_t{
		.wenda_box{
			.item_p{
				padding: 20rpx 0 30rpx;
				border-bottom: 1rpx solid #F6F6F6;
				line-height: 40rpx;
				.tit{
					font-size: 28rpx;
					color: #333;
				}
				.c_comtent{
					font-size: 28rpx;
					color: #666;
					padding: 10rpx 0;
				}
				.liang{
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	.x5_t{
		.box_item{
			padding: 0 0 30rpx;
			border-bottom: 1rpx solid #F6F6F6;
		}
		.t_table_x5{
			.tr_d{
				display: flex;
				.c1{
					width: 40%;
				}
				.c2{
					flex:1;
					text-align: center;
				}
				.c3{
					text-align: right;
					width: 20%;
				}
				&.hed_d{
					font-size: 28rpx;
					color: #999999;
					padding: 10rpx 0 10rpx;
				}
				&.hed_t{
					font-size: 28rpx;
					padding: 30rpx 0;
					.c1{
						width: 40%;
						color: #3567D9;
						display: inline-flex;
						align-items: center;
						.wen_img{
							width: 28rpx;
							height: 28rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
		.more_text{
			color: #666;
			font-size: 28rpx;
		}
		
	}
	.x4_t{
		.t_table_x4{
			.tr_d{
				display: flex;
				.c1{
					width: 40%;
				}
				.c2{
					flex:1;
					text-align: center;
				}
				.c3{
					text-align: right;
					width: 20%;
				}
				&.hed_d{
					font-size: 28rpx;
					color: #999999;
					padding: 0rpx 0 10rpx;
				}
				&.hed_t{
					font-size: 28rpx;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #F6F6F6;
				}
			}
		}
	}
	.x3_t{
		.x3_box{
			.item_b{
				padding:30rpx 0;
				border-bottom: 1rpx solid #F6F6F6;
				.hang1{
					font-size: 28rpx;
				}
				.date1{
					font-size: 24rpx;
					color: #666666;
					padding-top: 12rpx;
				}
			}
			
		}
	}
	.x1_t{
		.c_text{
			text-indent: 50rpx;
			font-size: 28rpx;
			margin: 26rpx 0 20rpx;
			line-height: 46rpx;
			display: -webkit-box;
			  -webkit-box-orient: vertical;
			  -webkit-line-clamp: 3;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  
		}
		.sy_hang{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #F6F6F6;
			padding: 30rpx 0;
			.s_left{
				display: inline-flex;
				align-items: center;
				.d_img{
					width: 32rpx;
					height: 32rpx;
					margin-right: 28rpx;
				}
				.t_tk{
					font-size: 28rpx;
				}
			}
			.r_left{
				display: inline-flex;
				align-items: center;
				.mjt1_img{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
	.lunbo_box_d{
		height: 388rpx;
		width: 710rpx;
		margin: 0 auto;
		position: relative;
		.anniu{
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			background-color: rgba(0,0,0,.5);
			border-radius: 30rpx;
			color: #fff;
			font-size: 24rpx;
			padding: 6rpx 20rpx;
		}
		::v-deep .uni-swiper-wrapper{
			height: 388rpx;
		}
		.swiper-item {
			text-align: center;
		}
		
		.img1 {
			width: 690upx;
			height: 388rpx;
		
		}
	}
	.scroll_h_view{
		white-space: nowrap;
		width: 100%;
		.nav_tc{
			display: inline-block;
			padding:30rpx 18rpx 20rpx;
			position: relative;
			font-size: 32rpx;
			&.active{
				font-weight: 500;
				font-size: 36rpx;
				&::before{
					content: "";
					position: absolute;
					border-radius: 4rpx;
					bottom: 0;
					transform: translate(-50%,0%);
					width: 40rpx;
					height: 8rpx;
					left: 50%;
					background: linear-gradient( 90deg, #3567D9 0%, #3677F6 100%);
				}
			}
		}
	}
}
</style>
